<template>
  <div class="time">
    <div class="left">
      <span :class="index == 0 ? 'active' : ''" @click="quickChnage(0)">昨天</span>
      <span :class="index == 1 ? 'active' : ''" @click="quickChnage(1)">今天</span>
      <span :class="index == 2 ? 'active' : ''" @click="quickChnage(2)">当月</span>
      <span :class="index == 3 ? 'active' : ''" @click="quickChnage(3)">上月</span>
    </div>
    <div class="right">
      <span>日期：</span>
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="dateChange"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import {
  parseTime,
  getyesterday,
  getLastMonthAndDay,
  getLastWeekAndDay,
  getNowMonth,
} from "@/utils/index";
export default {
  data() {
    return {
      parseTime,
      getyesterday,
      getLastMonthAndDay,
      getLastWeekAndDay,
      getNowMonth,
      date: [],
      //  快捷选择
      index: 2,
    };
  },
  created() {
    let nowMonth = this.getNowMonth();
    let nowmonth1 = this.parseTime(new Date(nowMonth[0]), "{y}-{m}-{d}");
    let nowmonth2 = this.parseTime(new Date(nowMonth[1]), "{y}-{m}-{d}");
    this.date = [nowmonth1, nowmonth2];
  },
  methods: {
    // 快捷切换
    quickChnage(type) {
      this.index = type;
      switch (type) {
        case 0:
          // 昨天
          let time = this.getyesterday();
          let start = this.parseTime(new Date(time[0]), "{y}-{m}-{d}");
          let end = this.parseTime(new Date(time[1]), "{y}-{m}-{d}");
          this.date = [start, end];
          break;
        case 1:
          // 今天
          let a = parseTime(new Date(), "{y}-{m}-{d}");
          this.date = [a, a];
          break;
        case 2:
          // 当月
          let nowMonth = this.getNowMonth();
          let nowmonth1 = this.parseTime(new Date(nowMonth[0]), "{y}-{m}-{d}");
          let nowmonth2 = this.parseTime(new Date(nowMonth[1]), "{y}-{m}-{d}");
          this.date = [nowmonth1, nowmonth2];
          break;
        case 3:
          // 上月
          let lastmonth = this.getLastMonthAndDay();
          let lastmonth1 = this.parseTime(new Date(lastmonth[1]), "{y}-{m}-{d}");
          let lastmonth2 = this.parseTime(new Date(lastmonth[0]), "{y}-{m}-{d}");
          this.date = [lastmonth1, lastmonth2];
          break;
      }
      this.sendDate();
    },

    //日期选择事件
    dateChange(val) {
      this.index = -1;
      let start = new Date(val[0]).getTime();
      let end = new Date(val[1]).getTime();
      let diff = end - start;
      if (diff > 60 * 24 * 60 * 60 * 1000) {
        this.$message.error("搜索范围时间跨度不得大于2个月");
        this.quickChnage(2);
        return;
      }
      this.sendDate();
    },
    // 传值
    sendDate() {
      this.$emit("getdate", this.date);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.time {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 0 28px;
  .left {
    span {
      display: inline-block;
      width: 70px;
      height: 30px;
      border: 1px solid #b9b9b9;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      color: #151515;
      margin-right: 8px;
      &.active {
        border: 1px solid $green;
        color: $green;
      }
    }
  }
  .right {
    margin-left: 30px;
    span {
      font-size: 16px;
      color: #4a4a4a;
    }
  }
}
</style>
